import React, { useEffect,useCallback,useState } from 'react';

function useResize(){
    const [size,setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })
    //useCallback可以将方法缓存，useDemo将变量缓存 避免重复渲染 提升性能
    const onResize = useCallback(()=>{
        setSize({
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        })
    },[])
    useEffect(()=>{
        window.addEventListener("resize",onResize)
        return ()=>{
            window.removeEventListener("resize",onResize)
        }
    },[])

    return size
}

function Demo(){
    const size = useResize();
    return (<div>窗口的宽高是：{ size.width } x { size.height }</div>)
}

export default Demo